import Cards from '/models/cards';
import Avatars from '/models/avatars';
import Users from '/models/users';

Template.userAvatar.helpers({
  userData() {
    // We need to handle a special case for the search results provided by the
    // `matteodem:easy-search` package. Since these results gets published in a
    // separate collection, and not in the standard Meteor.Users collection as
    // expected, we use a component parameter ("property") to distinguish the
    // two cases.
    const userCollection = this.esSearch ? ESSearchResults : Users;
    return userCollection.findOne(this.userId, {
      fields: {
        profile: 1,
        username: 1,
      },
    });
  },

  memberType() {
    const user = Users.findOne(this.userId);
    return user && user.isBoardAdmin() ? 'admin' : 'normal';
  },

  presenceStatusClassName() {
    const user = Users.findOne(this.userId);
    const userPresence = presences.findOne({ userId: this.userId });
    if (user && user.isInvitedTo(Session.get('currentBoard'))) return 'pending';
    else if (!userPresence) return 'disconnected';
    else if (Session.equals('currentBoard', userPresence.state.currentBoardId))
      return 'active';
    else return 'idle';
  },
});

Template.userAvatarInitials.helpers({
  initials() {
    const user = Users.findOne(this.userId);
    return user && user.getInitials();
  },

  viewPortWidth() {
    const user = Users.findOne(this.userId);
    return ((user && user.getInitials().length) || 1) * 12;
  },
});

BlazeComponent.extendComponent({
  onCreated() {
    this.error = new ReactiveVar('');

    Meteor.subscribe('my-avatars');
  },

  avatarUrlOptions() {
    return {
      auth: false,
      brokenIsFine: true,
    };
  },

  uploadedAvatars() {
    return Avatars.find({ userId: Meteor.userId() });
  },

  isSelected() {
    const userProfile = Meteor.user().profile;
    const avatarUrl = userProfile && userProfile.avatarUrl;
    const currentAvatarUrl = this.currentData().url(this.avatarUrlOptions());
    return avatarUrl === currentAvatarUrl;
  },

  noAvatarUrl() {
    const userProfile = Meteor.user().profile;
    const avatarUrl = userProfile && userProfile.avatarUrl;
    return !avatarUrl;
  },

  setAvatar(avatarUrl) {
    Meteor.user().setAvatarUrl(avatarUrl);
  },

  setError(error) {
    this.error.set(error);
  },

  events() {
    return [
      {
        'click .js-upload-avatar'() {
          this.$('.js-upload-avatar-input').click();
        },
        'change .js-upload-avatar-input'(event) {
          let file, fileUrl;

          FS.Utility.eachFile(event, f => {
            try {
              const suffixI = f.name.lastIndexOf('.');
              const suffix = f.name.substring(suffixI + 1).toUpperCase();
              // console.log('=====client=====', this);
              if (
                suffix !== 'JPG' &&
                suffix !== 'JPEG' &&
                suffix !== 'PNG' &&
                suffix !== 'GIF'
              ) {
                this.setError('avatar-not-image');
                return;
              }
              window.fsClientErrorThis = this;
              file = Avatars.insert(new FS.File(f));
              fileUrl = file.url(this.avatarUrlOptions());
            } catch (e) {
              //this.setError('avatar-too-big');
            }
          });

          if (fileUrl) {
            this.setError('');
            const fetchAvatarInterval = window.setInterval(() => {
              $.ajax({
                url: fileUrl,
                success: () => {
                  this.setAvatar(file.url(this.avatarUrlOptions()));
                  window.clearInterval(fetchAvatarInterval);
                },
              });
            }, 100);
          }
        },
        'click .js-select-avatar'() {
          const avatarUrl = this.currentData().url(this.avatarUrlOptions());
          this.setAvatar(avatarUrl);
        },
        'click .js-select-initials'() {
          this.setAvatar('');
        },
        'click .js-delete-avatar'() {
          Avatars.remove(this.currentData()._id);
        },
      },
    ];
  },
}).register('changeAvatarPopup');

// Template.cardMembersPopup.helpers({
//   isCardMember() {
//     const card = Template.parentData();
//     const cardMembers = card.getMembers();

//     return _.contains(cardMembers, this.userId);
//   },

//   user() {
//     return Users.findOne(this.userId);
//   },
// });

// Template.cardMembersPopup.events({
//   'click .js-select-member'(event) {
//     const card = Cards.findOne(Session.get('currentCard'));
//     const memberId = this.userId;
//     card.toggleMember(memberId);
//     event.preventDefault();
//   },
// });

Template.cardMemberPopup.helpers({
  user() {
    return Users.findOne(this.userId);
  },
});

Template.cardMemberPopup.events({
  'click .js-remove-member'() {
    Cards.findOne(this.cardId).unassignMember(this.userId);
    Popup.close();
  },
  'click .js-edit-profile': Popup.open('editProfile'),
});

BlazeComponent.extendComponent({
  onCreated() {
    this.currentBoard = Boards.findOne(Session.get('currentBoard'));
    const card = Cards.findOne(Session.get('currentCard'));
    const cardMembers = card.getMembers();
    var curMembers = this.currentBoard.members;
    var members = [];
    if(curMembers && curMembers.length > 0){
      for (let i = 0; i < curMembers.length; i++) {
        let member = Users.findOne(curMembers[i].userId);
        member.isCardMember = _.contains(cardMembers, curMembers[i].userId);
        members.push(member);
      }
    }
    this.boardMemberss = new ReactiveVar([]);
    this.boardMemberss.set(members);
  },

  boardMembers() {
    return this.boardMemberss.get();
  },

  events() {
    return [
      {
        'click .js-select-member'(event) {
          const card = Cards.findOne(Session.get('currentCard'));
          const memberId = event.currentTarget.firstChild.id;

          const cardMembers = card.getMembers();
          var sTbSrD = document.getElementsByClassName('js-card-member-list')[0].children;
          for (let i = 0; i < sTbSrD.length; i++) {
            var sTbSrDIndex = sTbSrD[i];
            if(sTbSrDIndex.children[0].firstChild.id === memberId){
              if(_.contains(cardMembers, memberId)){
                let boardMemberss = this.boardMemberss.get();
                boardMemberss[i].isCardMember = false;
                this.boardMemberss.set(boardMemberss);
              } else {
                let boardMemberss = this.boardMemberss.get();
                boardMemberss[i].isCardMember = true;
                this.boardMemberss.set(boardMemberss);
              }
            }
          }
          card.toggleMember(memberId);
          event.preventDefault();
        },
      }
    ];
  },

}).register('cardMembersPopup');
